import React, { PureComponent } from 'react'
import { connect } from 'react-redux'
import { Modal } from 'antd'

import PropTypes from 'prop-types'
import { getPriceFilter } from 'utils/utils'

import Style from './refundInfoModal.css'

class refundInfoModal extends PureComponent {
  static propTypes = {
    visible: PropTypes.bool,
    onCancel: PropTypes.func,
    confirmLoading: PropTypes.bool,
    refundDetailInfo: PropTypes.any
  }

  constructor (props) {
    super(props)
    this.state = {
    }
  }

  handleCancel = () => {
    const { onCancel } = this.props
    onCancel()
  }

  render () {
    const { visible, refundDetailInfo } = this.props
    if (!refundDetailInfo) return null

    return (
      <Modal
        title='退款信息'
        visible={visible}
        width='670px'
        footer={null}
        onCancel={this.handleCancel}
      >
        <div className={Style['info-wrap']}>
          <div className={Style['content']}>
            {/* <div className={Style['title']}>退款信息</div> */}
            <div className={Style['item']}>
              <div className={Style['label']}>订单编号</div>
              <div className={Style['value']}>{refundDetailInfo.orderNo}</div>
            </div>
            <div className={Style['item']}>
              <div className={Style['label']}>用户手机号</div>
              <div className={Style['value']}>{refundDetailInfo.userMobile}</div>
            </div>
            <div className={Style['item']}>
              <div className={Style['label']}>收货人姓名</div>
              <div className={Style['value']}>{refundDetailInfo.consigneeName}</div>
            </div>
            <div className={Style['item']}>
              <div className={Style['label']}>收货人手机号</div>
              <div className={Style['value']}>{refundDetailInfo.consigneeMobile}</div>
            </div>
            <div className={Style['item']}>
              <div className={Style['label']}>订单金额</div>
              <div className={Style['value']}>{refundDetailInfo.orderAmount ? `¥${getPriceFilter(refundDetailInfo.orderAmount)}` : '-'}</div>
            </div>
            <div className={Style['item']}>
              <div className={Style['label']}>退款金额</div>
              <div className={Style['value']}>{refundDetailInfo.refundAmount ? `¥${getPriceFilter(refundDetailInfo.refundAmount)}` : '-'}</div>
            </div>
            <div className={Style['item']}>
              <div className={Style['label']}>申请时间</div>
              <div className={Style['value']}>{refundDetailInfo.createTime}</div>
            </div>
            <div className={Style['item']}>
              <div className={Style['label']}>退款原因</div>
              <div className={Style['value']}>{refundDetailInfo.reason}</div>
            </div>
            <div className={Style['item']}>
              <div className={Style['label']}>是否退运费</div>
              <div className={Style['value']}>{refundDetailInfo.returnLogisticsAmountFlag === 1 ? '是' : refundDetailInfo.returnLogisticsAmountFlag === 0 ? '否' : '未知'}</div>
            </div>
            <div className={Style['item']}>
              <div className={Style['label']}>是否退货</div>
              <div className={Style['value']}>{refundDetailInfo.returnCommodityFlag === 1 ? '是' : refundDetailInfo.returnCommodityFlag === 0 ? '否' : '未知'}</div>
            </div>
            {refundDetailInfo.returnCommodityFlag === 1 && <div className={Style['item']}>
              <div className={Style['label']}>退货问题描述</div>
              <div className={Style['value']}>{refundDetailInfo.returnCommodityRemark}</div>
            </div>}
            {refundDetailInfo.returnCommodityFlag === 1 && <div className={Style['item']}>
              <div className={Style['label']}>退货原因</div>
              <div className={Style['value']}>{refundDetailInfo.returnCommodityReason}</div>
            </div>}
            <div className={Style['item']}>
              <div className={Style['label']}>处理备注</div>
              <div className={Style['value']}>{refundDetailInfo.remark}</div>
            </div>
          </div>
        </div>
      </Modal>
    )
  }
}

const mapState = state => ({
  refundDetailInfo: state.order.refundDetailInfo
})
const mapDispatch = dispatch => ({
})

export default connect(
  mapState,
  mapDispatch
)(refundInfoModal)
